<template>
  <div class="register">
    <svg preserveAspectRatio="none" viewBox="0 0 400 300">
      <!-- 背景渐变保持不变 -->
      <defs>
        <linearGradient id="Gradient" x1="0" x2="100%" y1="100%" y2="0%">
          <stop offset="0%" stop-color="#FF9EC6"/>
          <stop offset="100%" stop-color="#FFD3E0"/>
        </linearGradient>
        <linearGradient id="Gradient2" x1="0" x2="100%" y1="100%" y2="0%">
          <stop offset="0%" stop-color="#FF6B9D"/>
          <stop offset="100%" stop-color="#FFB8D9"/>
        </linearGradient>
      </defs>
      <polygon fill="url(#Gradient)" points="0,0 400,0 0,300"/>
      <polygon fill="url(#Gradient2)" points="100,100 300,100 100,250"/>
      <polygon fill="url(#Gradient)" points="150,150 250,150 150,225"/>
    </svg>

    <PageHead>注册账号</PageHead>

    <div class="register-card">
      <h2 class="register-title">创建您的账号</h2>

      <div class="form-group">
        <label class="form-label">账号</label>
        <input v-model="regVo.username" class="form-input" placeholder="请输入用户名" type="text" @change="isExist">
      </div>

      <div class="form-group">
        <label class="form-label">密码</label>
        <input v-model="regVo.password" class="form-input" placeholder="至少6位字符" type="password">
      </div>

      <div class="form-group">
        <label class="form-label">姓名</label>
        <input v-model="regVo.name" class="form-input" placeholder="请输入真实姓名" type="text">
      </div>

      <div class="form-group">
        <label class="form-label">性别</label>
        <div class="radio-group">
          <label class="radio-label">
            <input v-model="regVo.sex" type="radio" value="true"/>
            <span class="radio-custom"></span>
            <span class="radio-text">男</span>
          </label>
          <label class="radio-label">
            <input v-model="regVo.sex" type="radio" value="false"/>
            <span class="radio-custom"></span>
            <span class="radio-text">女</span>
          </label>
        </div>
      </div>

      <div class="form-group">
        <label class="form-label">邮箱</label>
        <input v-model="regVo.mail" class="form-input" placeholder="example@email.com" type="email">
      </div>

      <div class="form-group">
        <label class="form-label">验证码</label>
        <div class="code-group">
          <input v-model="regVo.code" class="form-input code-input" placeholder="验证码" type="text">
          <button class="code-btn" :disabled="mailBtn.dis" @click="sendMail">
            {{ mailBtn.btnTxt }}
          </button>
        </div>
      </div>

      <button class="submit-btn" @click="toReg">立即注册</button>

      <div class="login-link">
        已有账号？<router-link to="/">立即登录</router-link>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.register {
  width: 99vw;
  height: 96vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FFF0F5;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;

  svg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  .register-card {
    position: relative;
    z-index: 1;
    width: 420px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(255, 105, 157, 0.15);
    backdrop-filter: blur(8px);
    animation: fadeIn 0.5s ease;

    .register-title {
      color: #FF4785;
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 30px;
      text-align: center;
    }

    .form-group {
      margin-bottom: 20px;

      .form-label {
        display: block;
        margin-bottom: 8px;
        font-size: 14px;
        color: #666;
        font-weight: 500;
      }

      .form-input {
        width: 100%;
        padding: 12px 16px;
        border: 1px solid #FFD6E7;
        border-radius: 8px;
        font-size: 14px;
        color: #333;
        background: #FFF9FA;
        transition: all 0.3s;

        &:focus {
          border-color: #FF6B9D;
          box-shadow: 0 0 0 2px rgba(255, 107, 157, 0.2);
          outline: none;
        }

        &::placeholder {
          color: #FFB8D9;
        }
      }

      .radio-group {
        display: flex;
        gap: 20px;
        margin-top: 8px;

        .radio-label {
          display: flex;
          align-items: center;
          cursor: pointer;

          input {
            position: absolute;
            opacity: 0;
            cursor: pointer;

            &:checked ~ .radio-custom {
              background-color: #FF6B9D;
              border-color: #FF6B9D;

              &::after {
                opacity: 1;
              }
            }
          }

          .radio-custom {
            position: relative;
            width: 18px;
            height: 18px;
            border: 2px solid #FFB8D9;
            border-radius: 50%;
            margin-right: 8px;
            transition: all 0.3s;

            &::after {
              content: '';
              position: absolute;
              top: 3px;
              left: 3px;
              width: 8px;
              height: 8px;
              background: white;
              border-radius: 50%;
              opacity: 0;
              transition: opacity 0.3s;
            }
          }

          .radio-text {
            font-size: 14px;
            color: #666;
          }
        }
      }

      .code-group {
        display: flex;
        gap: 10px;

        .code-input {
          flex: 1;
        }

        .code-btn {
          width: 120px;
          background: linear-gradient(135deg, #FF6B9D, #FF9EC6);
          color: white;
          border: none;
          border-radius: 8px;
          font-size: 14px;
          cursor: pointer;
          transition: all 0.3s;

          &:hover {
            background: linear-gradient(135deg, #FF4785, #FF6B9D);
          }

          &:disabled {
            background: #FFD6E7;
            cursor: not-allowed;
          }
        }
      }
    }

    .submit-btn {
      width: 100%;
      padding: 14px;
      margin-top: 10px;
      background: linear-gradient(135deg, #FF4785, #FF6B9D);
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s;
      box-shadow: 0 4px 12px rgba(255, 107, 157, 0.3);

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(255, 107, 157, 0.4);
      }
    }

    .login-link {
      margin-top: 20px;
      text-align: center;
      font-size: 14px;
      color: #999;

      a {
        color: #FF6B9D;
        text-decoration: none;
        font-weight: 500;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>

<script lang="ts" setup>
import PageHead from "@/components/row/PageHead.vue";
import {reactive} from "vue";
import {ElMessage} from "element-plus";
import {reqLogin, reqRegisExist, reqRegister, reqSendRegMail} from "@/request/PowerApi";
import {RegisterVo} from "@/model/VO/RegisterVo";
import {LoginVo, RoleEnum} from "@/model/VO/LoginVo";
import {noMail} from "@/utils/MailUtil";

const regVo = reactive<RegisterVo>({
  username: "",
  password: "",
  name: "",
  sex: true,
  mail: "",
  code: ""
})
const mailBtn = reactive({btnTxt: "发送验证码", dis: false})
const sendMail = (): void => {
  if (noMail(regVo.mail)) return;
  mailBtn.dis = true;
  let countDown = 30;
  let intVal = setInterval(() => {
    if (countDown === 0) {
      clearInterval(intVal)
      mailBtn.dis = false;
      mailBtn.btnTxt = "发送验证码";
      return
    }
    mailBtn.btnTxt = "等待中(" + countDown + ")";
    countDown--;
  }, 1000)
  reqSendRegMail(regVo.mail)
}

// 用户名是否存在
const isExist = () => {
  reqRegisExist(regVo.username)
}

// 进行注册
const toReg = (): void => {
  if (regVo.username == '') {
    ElMessage.warning("用户名不能为空")
    return;
  }
  if (regVo.password.length < 5) {
    ElMessage.warning("密码长度不能低于5位")
    return;
  }
  if (regVo.name == '') {
    ElMessage.warning("请填写姓名")
    return;
  }
  reqRegister(regVo).then(res => {
    if (res.code === 1) {
      const loginVo: LoginVo = {
        username: regVo.username,
        password: regVo.password,
        remember: false,
        role: RoleEnum.CLIENT,
      }
      reqLogin(loginVo).then(res => {
        if (res.code === 1) location.href = "/#/reception"
      })
    }
  })
}
</script>


